<template>
  <div>
    <div>
      <el-button type="primary" @click="handleShowDialog"
      >新增课程</el-button>
    </div>
    <!-- 加载课程计划列表分页数据展示 -->
    <el-table :data="scheduleList" border style="width: 100%">
        <el-table-column prop="sid" label="编号" width="180" />
        <el-table-column prop="title" label="内容" />
        <el-table-column prop="completed" label="进度">
            <template #default="scope">
                <el-tag :type="scope.row.completed == 1 ? 'success' : 'danger'">
                    {{ scope.row.completed == 1 ? "已完成" : "未完成" }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button>编辑</el-button>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页导航 -->
     <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="selectPage"
      @current-change="selectPage"
    />
    <!-- 新增课程计划对话框 -->
    <div>
      <el-dialog 
      v-model="dialogFormVisible" 
      title="新增课程计划" 
      width="500">
        <el-form>
            <el-form-item label="内容" :label-width="formLabelWidth">
                <el-input
                          v-model="schedule.title"
                          autocomplete="off"
                          placeholder="请输入学习计划标题"
                          />
            </el-form-item>
            <el-form-item label="进度" :label-width="formLabelWidth">
                <el-select v-model="schedule.completed" placeholder="请选择进程">
                    <el-option label="已完成" :value="1" />
                    <el-option label="未完成" :value="0" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
<div class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="handleSave"> 提交 </el-button>
            </div>
       </template>
    </el-dialog>
</div>
</div>
</template>


<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { getSchedulePage, saveSchedule } from '../api/schedule';
import {ElMessage} from 'element-plus';
let pageNum = ref<Number>(1); 
let pageSize = ref<Number>(3);
let uid = ref<Number>(1);
let scheduleList = ref([]);
let total = ref(0);
//加载分页数据的函数
async function selectPage(){
    let {data} = await getSchedulePage(
        pageNum.value,
        pageSize.value,
        uid.value
        );

  console.log(data);
  scheduleList.value = data.records;
  total.value = data.total;
}
//页面初始化时调用查询分页数据的请求
onMounted(()=>{
    selectPage();
});
    // 新增按钮事件函数：弹出对话框 清空缓存
    function handleShowDialog() {
        schedule.value = {
            title: "",
            completed: 0,
            uid: 1,
        };
        dialogFormVisible.value = true;
    }

//新增对话框：
let dialogFormVisible = ref(false);
   const formLabelWidth = "140px";
    let schedule = ref({
        title: "",
        completed: 0,
        uid: 1,
    });
        //新增课程计划 提交按钮事件函数
    async function handleSave() {
        //1、提交新增请求给后端接口
        await saveSchedule(schedule.value);
        //如果处理成功
        //2、关闭对话框
        dialogFormVisible.value = false;
        //3、给前端提示处理结果
        ElMessage.success("新增成功");
        //4、刷新页面数据
        selectPage();
    }

//分页导航条 回调函数

//pageSize改变时回调
// function handleSizeChange(){
//   console.log('pageSize改变了:' + pageSize.value);
//   selectPage();
// }

//pageNum改变时回调
// function handleCurrentChange(){
//   console.log('currentPage改变了:' + pageNum.value);
//   selectPage();
// }


</script>
//scoped表示只对当前页面生效
<style scoped> 

</style>